<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Store</title>
    <!-- //Meta tag Keywords -->
    <!-- Custom-Files -->
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <!-- Bootstrap-Core-CSS -->
    <link rel="stylesheet" href="../static/css/style.css" type="text/css" media="all" />
    <!-- Style-CSS -->
    <!-- font-awesome-icons -->
    <link href="../static/css/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome-icons -->
    <!-- /Fonts -->
    <link href="http://at.alicdn.com/t/font_1812647_baid87hyd3d.css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet">
    <!-- //Fonts -->
</head>
<body>
    <div class="main-sec">
        <!-- //header -->
        <header th:fragment="menu(n)" class="py-sm-3 pt-3 pb-2" id="home">
            <div class="container">
                <!-- nav -->
                <div class="top-w3pvt d-flex">
                    <div id="logo">
                        <h1> <a href="index.html"><span class="log-w3pvt">B</span>aggage</a> <label class="sub-des">Online Store</label></h1>
                    </div>

                    <div class="forms ml-auto">
                        <span th:if="${user != null}"><span class="iconfont icon-yonghudenglu" style="font-size: 18px"></span> <span th:text="${user.username}">用户名</span></span>
                        <a href="login.html" th:href="@{/login}" th:if="${user == null}" class="btn"><span class="fa fa-user-circle-o"></span> 您好，请登录</a>
                        <a  th:href="@{/logout}" th:if="${user!= null}" class="btn"><span class="iconfont icon-tuichudenglu"></span> 退出</a>
                        <a href="register.html" th:href="@{/register}" th:if="${user == null}" class="btn"><span class="fa fa-pencil-square-o" ></span> 注册</a>
                    </div>
                </div>
                <div class="nav-top-wthree">
                    <nav>
                        <label for="drop" class="toggle"><span class="fa fa-bars"></span></label>
                        <input type="checkbox" id="drop" />
                        <ul class="menu">
                            <li  th:classappend="${n ==1} ? 'active' "><a href="index.html" th:href="@{/}">主页</a></li>
                            <li th:classappend="${n ==2} ? 'active' "><a href="about.html" th:href="@{/about}">关于我们</a></li>
                            <li>
                                <!-- First Tier Drop Down -->
                                <label for="drop-2" class="toggle">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span>
                                </label>
                                <a th:classappend="${n ==3} ? 'active' " href="#">系列 <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                                <input type="checkbox" id="drop-2" />
                                <ul>
                                    <li><a href="about.html" th:href="@{/}" class="drop-text">特色</a></li>
                                    <li><a href="goods.html" th:href="@{/goods?id=1}" class="drop-text">热卖</a></li>

                                </ul>
                            </li>

                            <li th:classappend="${n ==4} ? 'active' "><a href="shop.html" th:href="@{/shop}">商品</a></li>
                            <li th:classappend="${n ==5} ? 'active' "><a href="contact.html" th:href="@{/contact}">联系我们</a></li>
                            <li th:classappend="${n ==6} ? 'active' "><a href="shopcar.html" th:href="@{/shopcar}">购物车</a></li>
                        </ul>
                    </nav>
                    <!-- //nav -->
                    <div class="search-form ml-auto">
                        <div class="form-w3layouts-grid">
                            <form  th:action="@{/search}" method="get" class="newsletter">
                                <input class="search" name="goodsName" placeholder="搜索..." required="">
                                <button class="form-control btn" type="submit"><span class="fa fa-search"></span></button>
                            </form>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </header>
        <!-- //header -->

    </div>
    <!-- footer -->
    <div th:fragment="footer" class="footer_agileinfo_topf py-5">
        <div class="container py-md-5">
            <div class="row">
                <div class="col-lg-3 footer_wthree_gridf mt-lg-5">
                    <h2><a href="index.html"><span>B</span>aggage
                    </a> </h2>
                    <label class="sub-des2">Online Store</label>
                </div>
                <div class="col-lg-3 footer_wthree_gridf mt-md-0 mt-4">
                    <ul class="footer_wthree_gridf_list">
                        <li>
                            <a href="index.html" th:href="@{/}"><span class="fa fa-angle-right" aria-hidden="true"></span> 主页</a>
                        </li>
                        <li>
                            <a href="about.html" th:href="@{/about}"><span class="fa fa-angle-right" aria-hidden="true"></span> 关于我们</a>
                        </li>
                        <li>
                            <a href="shop.html" th:href="@{/shop}"><span class="fa fa-angle-right" aria-hidden="true"></span> 商品</a>
                        </li>

                    </ul>
                </div>
                <div class="col-lg-3 footer_wthree_gridf mt-md-0 mt-sm-4 mt-3">
                    <ul class="footer_wthree_gridf_list">

                        <li>
                            <a href="#"><span class="fa fa-angle-right" aria-hidden="true"></span> 条款&条件</a>
                        </li>
                        <li>
                            <a href="goods.html"><span class="fa fa-angle-right" aria-hidden="true"></span> 热卖</a>
                        </li>
                        <li>
                            <a href="contact.html" th:href="@{/contact}"><span class="fa fa-angle-right" aria-hidden="true"></span> 联系我们</a>
                        </li>
                    </ul>
                </div>

                <div class="col-lg-3 footer_wthree_gridf mt-md-0 mt-sm-4 mt-3">
                    <ul class="footer_wthree_gridf_list">
                        <li>
                            <a href="login.html"><span class="fa fa-angle-right" aria-hidden="true"></span> 登录 </a>
                        </li>

                        <li>
                            <a href="register.html"><span class="fa fa-angle-right" aria-hidden="true"></span>注册</a>
                        </li>
                        <li>
                            <a href="#"><span class="fa fa-angle-right" aria-hidden="true"></span>隐私&政策</a>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="w3ls-fsocial-grid">
                <h3 class="sub-w3ls-headf">Follow Us</h3>
                <div class="social-ficons">
                    <ul>
                        <li><a href="#"><span class="fa fa-facebook"></span> Facebook</a></li>
                        <li><a href="#"><span class="fa fa-twitter"></span> Twitter</a></li>
                        <li><a href="#"><span class="fa fa-google"></span>Google</a></li>
                    </ul>
                </div>
            </div>
            <div class="move-top text-center mt-lg-4 mt-3">
                <a href="#home"><span class="fa fa-angle-double-up" aria-hidden="true"></span></a>
            </div>
        </div>
    </div>
    <!-- //footer -->

</body>
</html>